<template>
  <section style="background: #fff;overflow: auto">
    <!-- <Header></Header> -->
    <div class="sub-container">
      <div class="video-container">
        <!-- <img src="static/images/play.png" @click="playVideo" v-show="videoPlay" style="width: 0.8rem; height: 0.8rem; z-index:100; left: 50%; top: 50%;transform: translateX(-50%) translateY(-50%);"> -->
        <!-- <img :src="detailInfo.coverUrl" @click="playVideo" v-show="videoPlay"> -->
        <video-player class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
        ></video-player>
      </div>
      <div class="article-container">
        <div v-html="detailInfo.description"></div>
      </div>
      <!--            <div class="article-comment">-->
      <!--                <p>评论</p>-->
      <!--                <Comment></Comment>-->
      <!--                <Comment></Comment>-->
      <!--                <Comment></Comment>-->
      <!--            </div>-->
      <!--            <div class="bottom-input">-->
      <!--                <input placeholder="评论一下呗~">-->
      <!--                <div>-->
      <!--                    <img src="static/images/share.png"/>-->
      <!--                    分享-->
      <!--                </div>-->
      <!--            </div>-->
    </div>
  </section>
</template>
<script>
  import Header from '@components/Header/Header'
  import Comment from '@components/Comment/Comment'
  import { Indicator } from 'mint-ui'
  import { getVideoDetail } from '@/api'
  export default {
    name:'coursedetail',
    components: { Comment, Header },
    data () {
      return {
        detailInfo: {},
        list:[],
        playerOptions: {
                //playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "video/mp4",
                    src: "" //你的m3u8地址（必填）
                }],
                poster: "", //你的封面地址
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                //  controlBar: {
                //   timeDivider: true,
                //   durationDisplay: true,
                //   remainingTimeDisplay: false,
                //   fullscreenToggle: true //全屏按钮
                //  }
            }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getDetail()
      })
    },
    methods: {
      getDetail () {
        getVideoDetail({id: this.$route.query.id}).then(res => {
          console.log(res.data)
          this.detailInfo = res.data
          this.playerOptions.poster = res.data.coverUrl
          this.playerOptions.sources = [{
            type: 'video/mp4',
            src: res.data.linkUrl
          }]
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .sub-container{
    overflow: hidden;
  }
  section{
    background: #eee;
  }
  .video-container{
    width: 100%;
    background: #000;
    margin-bottom: 0.2rem;
    position: relative;
    height: 3.75rem;
    margin-bottom: 0.3rem;
    video, img{
      width: 100%;
      height: 3.75rem;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }
    img{
      z-index: 99;
    }
  }
  .article-container{
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0.2rem 0.2rem;
    background: #fff;
    margin-bottom: 0.2rem;
  }
  .article-title{
    width: 100%;
    text-align: center;
    font-size: 0.3rem;
    color: #333;
    margin-bottom: 0.2rem;
  }
  .article-simple-info, .article-content{
    font-size: 0.24rem;
    color: #999;
    text-align: center;
    p{
      margin-bottom: 0.1rem;
    }
    span{
      color: #666;
    }
  }
  .article-content{
    text-align: left;
    text-indent: 0.4rem;
  }
  .article-tags{
    width: 100%;
    overflow: hidden;
    margin: 0.2rem 0 0;
    div{
      width: 1.1rem;
      height: 0.36rem;
      line-height: 0.36rem;
      border-radius: 3px;
      border: 1px solid #db8310;
      text-align: center;
      color: #db8310;
      float: left;
      margin-right: 0.2rem;
      font-size: 0.24rem;
    }
  }
  .article-comment{
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.2rem 1.2rem;
    background: #fff;
    margin-bottom: 0.2rem;
    p{
      margin-bottom: 0.3rem;
    }
  }
  .bottom-input{
    width: 100%;
    height: 0.96rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    padding: 0 0.2rem;
    z-index: 9;
    input{
      display: inline-block;
      width: 5.6rem;
      height: 0.74rem;
      margin-top: 0.1rem;
      background: #f5f5f5;
      border: 1px solid #eee;
      border-radius: 0.74rem;
      box-sizing: border-box;
      padding: 0 0.4rem;
      color: #999;
      font-size: 0.24rem;
    }
    div{
      float: right;
      overflow: hidden;
      height: 100%;
      line-height: 0.96rem;
      color: #666;
      font-size: 0.22rem;
      img{
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin: 0.3rem 0.1rem 0 0;
      }
    }
  }
</style>
